<template>
  <div class="big-box">
    <div class="order-seach-box">
      <el-form ref="form" class="el-form-box" :model="form" label-width="80px">
        <el-form-item class="elformitem" style="width:36%;margin-bottom:0px;" label="分享名称">
          <el-input clearable style="margin-left: 0px" maxlength="20" placeholder="请输入名称" v-model.trim="form.name"></el-input>
        </el-form-item>
        <el-button @click="getShareList(1,pageSize,form.name)" icon="el-icon-search" style="margin-left:26px" type="primary">搜索</el-button>
      </el-form>
    </div>
    <div class="order-con-box">
      <div class="ticketList-top-btn">
        <el-button :loading="outExeLoading" @click="outExe()" style="width:136px" icon="el-icon-upload2">导出</el-button>
        <el-button @click="addShareAlert=true" style="width:136px" icon="el-icon-plus">新建分享</el-button>
      </div>
      <el-table v-loading="loadingTable" element-loading-text="拼命加载中" @selection-change="handleSelectionChange" ref="multipleTable" :data="$store.state.shareList.shareUrls" border style="width: 100%">
        <el-table-column fixed="left" align="center" type="selection" width="66"></el-table-column>
        <el-table-column align="center" prop="channelName" label="名称">
        </el-table-column>
        <el-table-column width="100" align="center" label="创建时间">
          <template slot-scope="scope">
            {{$moment(scope.row.createDate,'YYYY-MM-DD HH:mm')}}
          </template>
        </el-table-column>
        <el-table-column width="100" align="center" prop="activeNum" label="预约量">
          <template slot-scope="scope">
            {{ scope.row.activeNum || 0 }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="url" label="移动链接">
          <template slot-scope="scope">
            <input type="text" v-if="scope.row.url" style=" opacity: 0;width:0px" v-model="scope.row.url">
            <el-button v-if="scope.row.url" v-clipboard:copy="scope.row.url" v-clipboard:success="onCopy" v-clipboard:error="onError" type="text">复制链接</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pcUrl" label="PC链接">
          <template slot-scope="scope">
            <input type="text" v-if="scope.row.pcUrl" style=" opacity: 0;width:0px" v-model="scope.row.pcUrl">
            <el-button v-if="scope.row.pcUrl" v-clipboard:copy="scope.row.pcUrl" v-clipboard:success="onCopy" v-clipboard:error="onError" type="text">复制链接</el-button>
          </template>
        </el-table-column>
        <el-table-column width="90" fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <!-- <el-button v-if="scope.row.url" v-clipboard:copy="scope.row.url" v-clipboard:success="onCopy" v-clipboard:error="onError" type="text">复制链接</el-button> -->
            <!-- <input v-if="scope.row.url" type="text" style=" opacity: 0;width:0px" v-model="scope.row.url"> -->
            <el-button @click="deltedData(scope.row)" type="text" style="color:#f56c6c">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div v-if="$store.state.shareList.count" class="el-pagination-box">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="$pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="$store.state.shareList.count">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="新建分享" :visible.sync="addShareAlert">
      <el-form :model="shareForm">
        <el-form-item label-width="100px" label="票种">
          <el-select style="width:100%" v-model="shareForm.ticketTypeId" filterable placeholder="请选择">
            <el-option v-for="item in ticketType" :key="item.ticketTypeId" :label="item.tTypeName" :value="item.ticketTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="名称">
          <el-input maxlength="20" v-model.trim="shareForm.channelName" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- <el-form-item label-width="100px" label="报名链接">
          <el-input readonly=readonly v-model="shareForm.value" class="input-with-select">
            <input type="text" style=" opacity: 0;width:0px" v-model="shareForm.value">
          </el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addShareAlert = false">取 消</el-button>
        <el-button @click="creadShare()" icon="el-icon-plus" :loading="loadingaddShareAlert" type="primary">创 建</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import GetDataFun from "./../js/GetDataFun.js"; //得到一些数据的方法
export default {
  data() {
    return {
      outExeLoading: false,
      shareForm: {
        ticketTypeId: "",
        channelName: ""
      }, //添加分享表单
      addShareAlert: false, //新建分享弹框
      form: {
        //搜索表单
        name: ""
      },
      loadingTable: false, //表格
      currentPage: 1, //当前页数
      pageSize: 10, //每页多少条
      ticketType: [], //票种类型
      loadingaddShareAlert: false,
      multipleSelection: []
    };
  },
  created() {
    this.getShareList(1, 10, "");
    this.getTicketType();
  },
  methods: {
    // 得到分享列表数据
    async getShareList(start = 1, limit = 10, channelName = "") {
      this.currentPage = start;
      this.loadingTable = true;
      let res = await GetDataFun.getShareList(start, limit, channelName).then(
        res => {},
        err => {}
      );
      this.loadingTable = false;
    },
    // 得到票种数据
    getTicketType() {
      this.$http
        .post("/api/isv/ticketType/queryTicketType", {
          activityId: this.$store.state.activityId,
          isPay: "pay"
        })
        .then(
          res => {
            if (res.data.success) {
              this.ticketType = [];
              for (let i = 0; i < res.data.result.length; i++) {
                this.ticketType.push({
                  tTypeName: res.data.result[i].tTypeName,
                  ticketTypeId: res.data.result[i].ticketTypeId
                });
              }
            } else {
              this.$message({
                message: res.data.errorMsg || "票种数据获取失败",
                type: "warning"
              });
            }
          },
          err => {
            this.$message.error("服务器出小差了");
          }
        );
    },
    // 新建分享
    creadShare() {
      if (!this.shareForm.ticketTypeId) {
        this.$message({
          message: "请选择票种",
          type: "warning"
        });
        return;
      }
      if (!this.shareForm.channelName) {
        this.$message({
          message: "请输入名称",
          type: "warning"
        });
        return;
      }
      this.loadingaddShareAlert = true;
      let subData = {
        activityId: this.$store.state.activityId,
        ticketTypeId: this.shareForm.ticketTypeId,
        channelName: this.shareForm.channelName
      };
      this.$http.post("/api/isv/shareUrl/addShareUrl", subData).then(
        res => {
          this.loadingaddShareAlert = false;
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "创建成功"
            });
            this.addShareAlert = false;
            this.shareForm.ticketTypeId = "";
            this.shareForm.channelName = "";
            this.currentPage = 1;
            this.getShareList(this.currentPage, this.pageSize, this.form.name);
          } else {
            this.$message({
              message: res.data.errorMsg || "创建失败",
              type: "warning"
            });
          }
        },
        err => {
          this.loadingaddShareAlert = false;
          this.$message.error("服务器出小差了");
        }
      );
    },
    //删除
    deltedData(scopeRow) {
      this.$confirm("您确定是否要进行删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let subData = {
            activityId: this.$store.state.activityId,
            id: scopeRow.id
          };
          this.$http.post("/api/isv/shareUrl/delShareUrl", subData).then(
            res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.currentPage = 1;
                this.getShareList(
                  this.currentPage,
                  this.pageSize,
                  this.form.name
                );
              } else {
                this.$message({
                  message: res.data.errorMsg || "删除失败",
                  type: "warning"
                });
              }
            },
            err => {
              this.$message.error("服务器出小差了");
            }
          );
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    onCopy: function() {
      this.$message({
        type: "success",
        message: "复制成功"
      });
    },
    onError: function() {
      this.$message.error("复制失败");
    },
    // 导出
    outExe() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请至少选择一项",
          type: "warning"
        });
        return;
      }
      let ids = [];
      this.multipleSelection.map(item => {
        ids.push(item.id);
      });
      this.outExeLoading = true;
      this.$http
        .post(
          "/api/isv/shareUrl/exportShareUrl",
          {
            activityId: this.$store.state.activityId,
            ids: ids
          },
          {
            responseType: "arraybuffer"
          }
        )
        .then(
          res => {
            this.outExeLoading = false;
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel"
            });

            let link = document.createElement("a");

            let _name = res.headers["content-disposition"].split("=");

            let fileName = _name[1];

            let seat = fileName.lastIndexOf(".");
            //返回位于String对象中指定位置的子字符串并转换为小写.
            let extension = fileName.substring(seat).toLowerCase() || ".xlsx";
            link.href = window.URL.createObjectURL(blob);

            link.download = decodeURIComponent("分享列表" + extension);

            link.click();
          },
          err => {
            this.outExeLoading = false;
            this.$message.error("服务器出小差了！");
          }
        );
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getShareList(this.currentPage, this.pageSize, this.form.name);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getShareList(this.currentPage, this.pageSize, this.form.name);
    }
  }
};
</script>

<style scoped>
.big-box {
  width: 100%;
  height: auto;
}
.order-seach-box {
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 6px;
  padding: 26px;
}
.el-form-box {
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 100%;
}

.order-con-box {
  width: 100%;
  height: auto;
  min-height: 200px;
  background: #fff;
  border-radius: 6px;
  padding: 26px;
  /* margin-top: 18px; */
}
.ticketList-top-btn {
  width: 100%;
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
</style>
